import React, { Component } from 'react'
import { Dimensions } from 'react-native'
import {
  Text,
  View,
  Tile,
  Title,
  Caption,
  Divider,
  TouchableOpacity
} from '@shoutem/ui'
import Image from 'react-native-image-progress'
import * as Progress from 'react-native-progress'

import { Actions } from 'react-native-router-flux'
import FavoriteDetail from './FavoriteDetail'

// uri, desc, username, ctime, height, width, resized_url, id
const ImagePost = (data) => {
  const {height:sHeight,width:sWidth} = Dimensions.get('window')
  const post = data.hasOwnProperty('time') ? data.post : data
  let { desc, username, ctime, height, width, resized_url, uri } = post
  if (data.hasOwnProperty('time')) {
    uri = post.img_src
  }
  // 如果图片的原始高度小于Image设置的高度，宽度正好，图片会被均衡拉伸(x,y方向)，宽度显示会有问题
  if (height < sHeight) {
    // 所有的图片宽度都等于屏幕宽度，如果高度小于屏幕高度会根据宽度的拉伸比例(>1 or <1)进行拉伸
    // 如果高度大于屏幕，则不需要拉伸
    height = height * (sWidth / width)
  } else {
    height = sHeight
  }
  thumbnail_uri = resized_url ? resized_url : uri
  return (
      <Divider styleName="section-header" >
        <Tile>
          <View styleName="content">
            <View styleName="horizontal space-between">
              <Caption>{username}</Caption>
              <Caption>{ctime}</Caption>
            </View>
          </View>
          <View styleName="content">
            <Title>{desc}</Title>
          </View>
          <TouchableOpacity onPress={() => (
            data.hasOwnProperty('time') ?
            ( data.level==='favorite' ?
              Actions.favoriteImageDetail({data:post, hideBottom:true})
              : Actions.likeImageDetail({data:post, hideBottom:true})
            )
            : Actions.imageDetail({data:post, hideBottom:false}))
          }>
            <Image
              resizeMode='contain'
              style={{width:sWidth, height}}
              source={{uri:thumbnail_uri}}
              indicator={Progress.Pie}
              indicatorProps={{
                size: 80,
                borderWidth: 0,
                color: 'rgba(150, 150, 150, 1)',
                unfilledColor: 'rgba(200, 200, 200, 0.2)'
              }}
            />
          </TouchableOpacity>
          {data.hasOwnProperty('time') ? <FavoriteDetail {...data}/> : null}
        </Tile>
      </Divider>
    )
  }

export default ImagePost
